import React from 'react';
import {Spin, Card} from 'antd';
import PropTypes from 'prop-types';
import DataSet from '@antv/data-set';
import {formatAmount} from '../utils';
import {Chart, Geom, Axis, Tooltip, Coord, Label} from 'bizcharts';

export class TablePanel extends React.PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            loading: false
        };
    }
    render() {
        const {formatMessage} = this.props.intl;
        const ds = new DataSet();
        const data = this.props.varietyQuantityContents.map(v => ({
            country: v.country,
            varietyQuantity: v.varietyQuantity,
        }));
        const data2 = this.props.amountContents.map(v => ({
            country: v.country,
            amount: v.amount,
        }));
        const data3 = this.props.packingContents.map(v => ({
            country: v.country,
            packing: v.packing,
        }));
        const dv = ds.createView().source(data);
        dv.source(data).transform({
            type: 'sort',
        
            callback(a, b) {
                return a.varietyQuantity - b.varietyQuantity > 0;
            }
        });
        const dv2 = ds.createView().source(data2);
        dv2.source(data2).transform({
            type: 'sort',
        
            callback(a, b) {
                return a.amount - b.amount > 0;
            }
        });
        const dv3 = ds.createView().source(data3);
        dv3.source(data3).transform({
            type: 'sort',
        
            callback(a, b) {
                return a.packing - b.packing > 0;
            }
        });
        return (
            <div>
                <Spin spinning={this.props.loading}>
                    <Card.Grid
                        style={{
                            width: '33%',
                            marginBottom: 15}}>
                        <Card
                            bodyStyle={{padding: 0}}
                            bordered={false}>
                            <Card.Meta
                                title={formatMessage({
                                    id: 'tablePanel.column.varietyQuantity',
                                    defaultMessage: '品种'
                                })}
                                description={<Chart height={400} data={dv} forceFit>
                                    <Coord transpose />
                                    <Axis
                                        name="country"
                                        label={{
                                            offset: 12
                                        }}/>
                                    <Axis name="varietyQuantity" />
                                    <Tooltip />
                                    <Geom type="interval" position="country*varietyQuantity"
                                        tooltip={['country*varietyQuantity', (country, varietyQuantity) => ({
                                            title: country,
                                            name: formatMessage({
                                                id: 'tablePanel.Geom.varietyQuantity',
                                                defaultMessage: '品种：'
                                            }),
                                            value: varietyQuantity
                                        })]}>
                                        <Label
                                            content="varietyQuantity"
                                            textStyle={{
                                                textAlign: 'end',
                                                fill: '#404040',
                                                fontSize: '12',
                                            }}/>
                                    </Geom>
                                </Chart>}/>
                        </Card>
                    </Card.Grid>
                    <Card.Grid
                        style={{
                            width: '33%',
                            marginBottom: 15,
                            marginLeft: 12}}>
                        <Card
                            bodyStyle={{padding: 0}}
                            bordered={false}>
                            <Card.Meta
                                title={formatMessage({
                                    id: 'tablePanel.column.amount',
                                    defaultMessage: '金额'
                                })}
                                description={<Chart height={400} data={dv2} forceFit>
                                    <Coord transpose />
                                    <Axis
                                        name="country"
                                        label={{
                                            offset: 12
                                        }}/>
                                    <Axis name="amount" />
                                    <Tooltip />
                                    <Geom type="interval" position="country*amount" color={'#DC143C'}
                                        tooltip={['country*amount', (country, amount) => ({
                                            title: country,
                                            name: formatMessage({
                                                id: 'tablePanel.Geom.amount',
                                                defaultMessage: '金额：'
                                            }),
                                            value: `$${formatAmount(amount)}`
                                        })]}>
                                        <Label
                                            content="amount"
                                            formatter={text => `$${formatAmount(text)}`}
                                            textStyle={{
                                                textAlign: 'middle',
                                                fill: '#404040',
                                                fontSize: '12',
                                            }}/>
                                    </Geom>
                                </Chart>}/>
                        </Card>
                    </Card.Grid>
                    <Card.Grid
                        style={{
                            width: '32%',
                            marginBottom: 15,
                            marginLeft: 12}}>
                        <Card
                            bodyStyle={{padding: 0}}
                            bordered={false}>
                            <Card.Meta
                                title={formatMessage({
                                    id: 'tablePanel.column.packing',
                                    defaultMessage: '包装单元'
                                })}
                                description={<Chart height={400} data={dv3} forceFit>
                                    <Coord transpose />
                                    <Axis
                                        name="country"
                                        label={{
                                            offset: 12
                                        }}/>
                                    <Axis name="packing" />
                                    <Tooltip />
                                    <Geom type="interval" position="country*packing" color={'#008000'}
                                        tooltip={['country*packing', (country, packing) => ({
                                            title: country,
                                            name: formatMessage({
                                                id: 'tablePanel.Geom.packing',
                                                defaultMessage: '包装单元：'
                                            }),
                                            value: packing
                                        })]}>
                                        <Label
                                            content="packing"
                                            textStyle={{
                                                textAlign: 'end',
                                                fill: '#404040',
                                                fontSize: '12',
                                            }}/>
                                    </Geom>
                                </Chart>}/>
                        </Card>
                    </Card.Grid>
                </Spin>
            </div>
        );
    }
}
TablePanel.propTypes = {
    varietyQuantityContents: PropTypes.array.isRequired,
    amountContents: PropTypes.array.isRequired,
    packingContents: PropTypes.array.isRequired,
    hasError: PropTypes.string.isRequired,
    loading: PropTypes.bool.isRequired,
    intl: PropTypes.object,
};
import {connect} from 'react-redux';
import selectorFactory from 'Shared/utils/immutableToJsSelectorFactory';
import {injectIntl} from './intl';


const varietyQuantityContent = selectorFactory(['page', 'domainData', 'list', 'varietyQuantityContent']);
const amountContent = selectorFactory(['page', 'domainData', 'list', 'amountContent']);
const packingContent = selectorFactory(['page', 'domainData', 'list', 'packingContent']);
const mapStateToProps = state => ({
    varietyQuantityContents: varietyQuantityContent(state),
    amountContents: amountContent(state),
    packingContents: packingContent(state),
    loading: state.getIn(['page', 'domainData', 'list', 'isFetching']),
    hasError: state.getIn(['page', 'domainData', 'list', 'hasError']),
});

export default connect(mapStateToProps, null)(injectIntl(TablePanel));


